<template>
	<view>
		<view class="list padding-md">
                <view class="-margin-xs">
                    <uv-grid :col="2" :border="false">
                        <uv-grid-item v-for="(item, index) in list" :key="index" @click="toFormPage(item.id)">
                            <view class="list-item padding-xs">
                                <view class="bg-white padding-md border-radius-md">
                                    <view> <text>{{ item.title }}</text></view>
                                    <view>
                                        <text class="unit font-size-xs text-color-placeholder">{{ item.init_num }}{{
                                            item.unit
                                        }}</text>
                                    </view>
                                </view>
                            </view>
                        </uv-grid-item>
                    </uv-grid>
                </view>
        </view>
		<fixed-button button-text="添加快捷输入" @on-tap="toFormPage()"></fixed-button>
	</view>
</template>

<script lang="ts" setup>
import { queryThingOptions } from '@/api';
import { ref } from 'vue';
import { onShow, onPullDownRefresh } from '@dcloudio/uni-app';
import type { ThingOption } from '../thing/type';


var list = ref<ThingOption[]>([]);

onPullDownRefresh(() => {
	getOptions();
	uni.stopPullDownRefresh
})

onShow(() => {
	getOptions();
})

function toFormPage(id: number = 0) {
	uni.navigateTo({
		url: '/pages/thing-option/form?id=' + id
	});
}

async function getOptions() {
	const result: any = await queryThingOptions();
	list.value = result.data;
	return result;
}
</script>

<style lang="scss" scoped>
.list {
    &-item {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        position: relative;
    }
}
</style>
